<div class="portlet light bordered parking-list-container" style="margin: 15px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold"> Parking List </span>
        </div>
        <div class="actions">
            <button type="submit" class="btn blue" ng-click="addParking()">Add Parking</button>
        </div>
    </div>
    <div class="portlet-body form form-horizontal">
        <form name="editForm" class="form-horizontal">
            <div class="form-group">
                <div class="col-md-3">
                    <label >Renter:</label>
                    <input name="renter" class="form-control" ng-model="search.renter"/>
                </div>
                <div class="col-md-3">
                    <label >Phone:</label>
                    <input name="phone" class="form-control" ng-model="search.phone"/>
                </div>
                <div class="col-md-3">
                    <label >Email:</label>
                    <input name="email" class="form-control" ng-model="search.email"/>
                </div>
            </div>

            <div class="form-group form-actions right" style="padding: 0px;">
                <!--<button type="submit" class="btn blue" style="float:right;" ng-click="viewDetails()">View Details</button>-->
                <button type="submit" class="btn blue" style="float:right;" ng-click="searchParking()">Search</button>
            </div>
        </form>
        <div class="table-scrollable">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>
                            <a class="extend-icon"
                               ng-class="{'icon-extend-state': isViewDetail === true,
                             '': isViewDetail === false}"
                               ng-click="viewDetails($index)"
                            ></a>
                            Renter
                        </th>
                        <th>Renter Type</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th width="200">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat-start="item in list track by $index">
                        <td>
                            <a class="extend-icon"
                                  ng-class="{'icon-extend-state': extendList[$index] === true,
                             '': extendList[$index] === false}"
                                  ng-click="extendlick($index)"
                            ></a>
                            {{item.renter}}
                        </td>
                        <td>{{item.renterType}}</td>
                        <td>{{item.phone}}</td>
                        <td>{{item.email}}</td>
                        <td style="text-align: center; min-width: 160px">
                            <a ng-click="editParking(item.parkingId)" title="Edit">edit</a>|
                            <a ng-click="deleteParking($index)" title="Delete">delete</a>
                            <!--<a ng-href="{{'#/wms/inbound/receipt/' + item.receiptId}}">View</a>-->
                        </td>
                    </tr>
                    <tr class="child" ng-show="extendList[$index]" ng-repeat-end>
                        <td class="child" colspan="6" style="padding-left: 40px;">
                            <div class="row parking-group-title">
                                <span class="col-md-3"><b>Parking Space Count</b></span>
                                <span class="col-md-3"><b>Parking Space Locations</b></span>
                                <span class="col-md-3"><b>Renter Start Date</b></span>
                                <span class="col-md-3"><b>Renter End Date</b></span>
                            </div>
                            <div class="row parking-group-date" ng-repeat="group in item.parkingGroups track by $index"
                                 ng-init="groupIndex = $index">
                                <span class="col-md-3">{{group.num}}</span>
                                <span class="col-md-3">
                                    <span ng-repeat="placeNO in group.noArr">
                                    {{placeNO}}&nbsp;
                                    </span>
                                </span>
                                <span class="col-md-3">{{group.rs}}</span>
                                <span class="col-md-3">{{group.re}}</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>